<script setup>
import {defineProps} from "vue";
import {createRouter as $router} from "vue-router";
import router from "@/router/index.js";

const props = defineProps({
  goods: {
    id: Number,
    packageName: String,
    packageDescription: String,
    packagePrice: Number,
    packagePictureUrl: String,
  }
})

const jump = () => {
  // $router.push('/' + props.goods.id)
  router.push({
    path: '/' + props.goods.id,
    query: {price: props.goods.packagePrice}
  });
}


</script>

<template>

  <div class="app" @click="jump">
    <div class="item">
      <el-image :src="props.goods.packagePictureUrl" class="image"/>
      <div class="name">{{ props.goods.packageName }}</div>
      <div class="price">
        <span>¥</span>
        <span style="font-size: 20px;font-weight: 700;">
        {{ parseFloat(props.goods.packagePrice).toFixed(2) }}
      </span>
      </div>
    </div>
  </div>

</template>

<style scoped>

.app {
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}

.item {
  position: relative;
  float: left;
  width: 230px;
  height: 322px;
  margin: 0 5px 10px;
  background-color: #FFFFFF;
  padding: 5px;
  position: relative; /* 为伪元素创建定位上下文 */
  overflow: hidden; /* 隐藏伪元素溢出 */
}

.item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* 白色半透明背景 */
  transform: translateX(-100%); /* 初始状态隐藏在左侧 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.item:hover::before {
  transform: translateX(100%); /* 鼠标悬停时，从左到右滑过 */
}

.item:hover {
  cursor: pointer; /* 鼠标悬停时，更改鼠标样式为手型 */
}

.name {
  height: 48px;
  font-size: 14px;
  line-height: 24px;
  text-align: left;
  color: #666;
  -webkit-transition: color .2s ease;
  transition: color .2s ease;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0px 10px 0px 10px;
}

.price {
  display: inline-block;
  font-size: 16px;
  line-height: 18px;
  height: 18px;
  color: #e1251b;
  margin: 10px 10px 0px 10px;
}

.image {
  width: 100%;
  height: 75%;
}

</style>